<template>
  <div id="list">
    <!-- 头部 -->
    <mt-header fixed title="全部机型" class="head">
      <router-link to="/renewindex/renew" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- 导航栏 -->
    <mt-navbar v-model="des" class="navbar-list" fixed>
      <mt-tab-item id="1">全部</mt-tab-item>
      <mt-tab-item id="10011001">苹果</mt-tab-item>
      <mt-tab-item id="10011002">华为</mt-tab-item>
      <mt-tab-item id="10011003">VIVO</mt-tab-item>
      <mt-tab-item id="10011004">OPPO</mt-tab-item>
      <mt-tab-item id="10011006">小米</mt-tab-item>
    </mt-navbar>
    <!-- 面板 -->
    <mt-tab-container>
      <mt-tab-container-item
        infinite-scroll-distance="20"
        v-infinite-scroll="loadmore"
        infinite-scroll-disabled="busy"
      >
        <div class="panel" style="width: 380px">
          <div
            class="con"
            v-for="(item, i) of arr"
            :key="i"
            @click="getProDetails(item.name,item.prise)"
          >
            <div class="con1">
              <img :src="`http://127.0.0.1:3000/${item.photo_url}`" />
            </div>
            <div class="con2">
              <p>{{ item.name }}</p>
              <p>三摄8GB+256GB</p>
              <p>官网价{{ item.prise }}</p>
              <p>换新立减250</p>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      des: "1",
      arr: [],
      busy: false,
      pno: 1,
    };
  },
  methods: {
    // 跳转到详情页面
    getProDetails(protitle, proprice) {
      this.$router.push(`/prodetail/${protitle}/${proprice}`);
    },
    // 无限滚动触底后，执行loadmore
    loadmore() {
      if (this.des == 1) {
        this.pno++;
        this.busy = true;
        this.$indicator.open("请稍等...");
        this.axios.get(`/products/index?pno=${this.pno}`).then((res) => {
          this.arr = this.arr.concat(res.data.data);
          this.busy = false;
          this.$indicator.close();
        });
      }
    },
  },
  mounted() {
    let lid = window.location.href.split("=")[1];
    this.des = lid;
  },
  watch: {
    //根据导航栏选项不同进行不同的商品加载
    des() {
      this.$indicator.open("请稍等...");
      if (this.des == "1") {
        this.loadCommodity = "";
        this.axios.get("/products/index?pno=1").then((res) => {
          this.arr = res.data.data;
          this.$indicator.close();
        });
      } else {
        this.axios
          .get(`products/secondcategorypro?second_type_id=${this.des}`)
          .then((res) => {
            this.arr = res.data;
            this.$indicator.close();
          });
      }
    },
  },
};
</script>
<style>
/* 头部 */
#list {
  background: #f5f5f5;
}

/* 导航栏 */
#list .navbar-list {
  font-size: 23px;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  margin: -25px 10px 80px 10px;
}

#list .mint-navbar .mint-tab-item.is-selected {
  border: 0;
  color: red;
}
/* 面板 */
#list .con {
  width: 170px;
  height: 230px;
  margin: 8px 9px;
  border-radius: 10px;
  background-color: #fff;
}
#list .con1 {
  width: 100px;
  margin: 10px auto;
}
#list .con1 > img {
  width: 100%;
  margin-top: 12px;
}
#list .con2 {
  font-size: 8px;
  text-align: center;
}
#list .con2 p {
  margin-top: 5px;
}
#list .con2 > :last-child {
  color: red;
  font-weight: bold;
}
#list .con2 > :nth-child(3) {
  color: #a2a2a2;
}
#list .panel {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 19px;
}
</style>
